<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

		h1 {
			--color: #000;
			color: lighten(0,0,0, 1);
		}
	</style>
</head>
<body>
	<h1 style="--color: #000;">dsfkjhsdf</h1>

	<script>
		




function createIterator (obj) {
	const oldObjProtorype = Object.prototype

	const newObjPrototype = Object.create(Object.prototype)

	obj.__proto__ = newObjPrototype

	newObjPrototype[Symbol.iterator] = function () {
		const keys = Object.keys(this)
		let index = 0
		const length = keys.length

		return {
			next: () => {
				console.log(index)
				return {
					value: (() => {
						const k = keys[index]
						const v = this[k]
						index++
						return [k, v]

					})(),
					done: index > length
				}

			}
		}
	}
}

const o = {a: 'hello', b: 'world', c: 'hello world', [Symbol.iterator]:  function () {
		const keys = Object.keys(this)
		let index = 0
		const length = keys.length

		return {
			next: () => {
				console.log(index)
				return {
					value: (() => {
						const k = keys[index]
						const v = this[k]
						index++
						return [k, v]

					})(),
					done: index > length
				}

			}
		}
	} }

// createIterator(o)

console.log(o)

for (let [key, value] of o) {
    console.log(key, value);
}

// const a = {a: 'hello', b: 'world', c: 'hello world'}

// console.log(a.__proto__ === Object.prototype)




	</script>
</body>
</html>